<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Konva Example</title>
    <script src="https://cdn.jsdelivr.net/npm/konva@8.4.3/konva.min.js"></script>
    <style>
        #fraction {
            margin-left: 20px;
        }
        #fraction input {
            width: 40px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div>
        <div id="container" style="width:500px; height:500px; border:1px solid black;"></div>
        <div id="fraction">
            <input type="number" id="numerator" placeholder="分子" /> <br />
            <hr />
            <input type="number" id="denominator" placeholder="分母" />
        </div>
    </div>

    <script>
        var stage = new Konva.Stage({
            container: 'container',
            width: 500,
            height: 500
        });

        var layer = new Konva.Layer();
        stage.add(layer);

        // 创建矩形
        var rectangle = new Konva.Rect({
            x: 50,
            y: 50,
            width: 100,
            height: 50,
            fill: 'blue',
            stroke: 'black',
            strokeWidth: 2,
            draggable: true
        });
        layer.add(rectangle);

        // 创建圆形
        var circle = new Konva.Circle({
            x: 200,
            y: 75,
            radius: 50,
            fill: 'red',
            stroke: 'black',
            strokeWidth: 2,
            draggable: true
        });
        layer.add(circle);

        // 创建带竖线的线段
        var line = new Konva.Line({
            points: [300, 50, 400, 50],
            stroke: 'green',
            strokeWidth: 2,
            draggable: true
        });
        layer.add(line);

        var verticalLineLeft = new Konva.Line({
            points: [300, 40, 300, 60],
            stroke: 'black',
            strokeWidth: 2
        });
        layer.add(verticalLineLeft);

        var verticalLineRight = new Konva.Line({
            points: [400, 40, 400, 60],
            stroke: 'black',
            strokeWidth: 2
        });
        layer.add(verticalLineRight);

        layer.draw();

        // 选择图形后在下方绘制
        [rectangle, circle, line].forEach(shape => {
            shape.on('click', () => {
                drawSelectedShape(shape);
            });
        });

        function drawSelectedShape(shape) {
            var clone;
            if (shape instanceof Konva.Rect) {
                layer.visible(false)
                clone = shape.clone({ y: 200 });
            } else if (shape instanceof Konva.Circle) {
                clone = shape.clone({ y: 200 });
            } else if (shape instanceof Konva.Line) {
                clone = shape.clone({ y: 200 });
            }
            layer.add(clone);
            layer.draw();

            document.getElementById('denominator').onchange = function () {
                var denominator = parseInt(this.value);
                if (!isNaN(denominator) && denominator > 0) {
                    if (clone instanceof Konva.Rect) {
                        divideRectangle(clone, denominator);
                    } else if (clone instanceof Konva.Circle) {
                        divideCircle(clone, denominator);
                    } else if (clone instanceof Konva.Line) {
                        divideLine(clone, denominator);
                    }
                }
            };
        }

        // 矩形等分
        function divideRectangle(rect, denominator) {
            var segmentWidth = rect.width() / denominator;
            for (var i = 0; i < denominator; i++) {
                var segment = new Konva.Rect({
                    x: rect.x() + i * segmentWidth,
                    y: rect.y(),
                    width: segmentWidth,
                    height: rect.height(),
                    fill: 'white',
                    stroke: 'black',
                    strokeWidth: 1
                });

                segment.on('click', function () {
                    this.fill(this.fill() === 'white' ? 'yellow' : 'white');
                    layer.draw();
                });

                layer.add(segment);
            }
            rect.destroy();  // 删除原始图形
            layer.draw();
        }

        // 圆形等分
        function divideCircle(circle, denominator) {
            var angleStep = 360 / denominator;
            for (var i = 0; i < denominator; i++) {
                var wedge = new Konva.Wedge({
                    x: circle.x(),
                    y: circle.y(),
                    radius: circle.radius(),
                    angle: angleStep,
                    rotation: i * angleStep,
                    fill: 'white',
                    stroke: 'black',
                    strokeWidth: 1
                });

                wedge.on('click', function () {
                    this.fill(this.fill() === 'white' ? 'yellow' : 'white');
                    layer.draw();
                });

                layer.add(wedge);
            }
            circle.destroy();  // 删除原始图形
            layer.draw();
        }

        // 线段等分
        function divideLine(line, denominator) {
            var points = line.points();
            var xStart = points[0];
            var xEnd = points[2];
            var y = points[1];
            var segmentLength = (xEnd - xStart) / denominator;

            for (var i = 1; i < denominator; i++) {
                // 计算每个等分点的位置
                var xPos = xStart + i * segmentLength;
                
                // 在等分点处添加竖线
                var verticalLine = new Konva.Line({
                    points: [xPos, y - 10, xPos, y + 10],
                    stroke: 'black',
                    strokeWidth: 2
                });

                verticalLine.on('click', function () {
                    this.stroke(this.stroke() === 'black' ? 'yellow' : 'black');
                    layer.draw();
                });

                layer.add(verticalLine);
            }
            line.destroy();  // 删除原始线段
            layer.draw();
        }
    </script>
</body>
</html>
